<template>
	<view>

		<view class="head">
			<image @click="show=true" src="../../static/users/jubao.png" mode=""></image>
		</view>

		<u-action-sheet @click="shop" :list="lists" v-model="show"></u-action-sheet>

		<u-tabs :list="list" :current="current" bg-color="#fff" active-color="#181818" inactive-color="#181818"
			@change="change"></u-tabs>
		<view v-if="current==0">


			<view class="shai_xuan">
				<view class="text1">
					价格
					<image class="image_lou" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
				</view>

				<view class="xian">

				</view>

				<view class="text2">
					销量
					<image class="image_xiao" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
				</view>

			</view>

			<view class="detailback" v-for="(item,index) in menu">
				<image class="img_detail" src="../../static/users/shop.png" mode="aspectFill"></image>
				<view class="title">
					灶门炭治郎手办,鬼灭之刃组合手办强...组合手办强...
				</view>
				<view class="have">
					已售100
				</view>
				<view class="price">
					<text>¥</text>
					366
				</view>
			</view>

			<view class="bottom">

			</view>
		</view>

		<view v-if="current==1">
			222
		</view>

		<view v-if="current==2">
			333
		</view>

		<view v-if="current==3">
			444
		</view>

		<view v-if="current==4">
			555
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '推荐'
				}, {
					name: '佩饰'
				}, {
					name: '美妆',
				}, {
					name: '潮流',
				}, {
					name: '运动',
				}, {
					name: '服装',
				}, {
					name: '佩饰'
				}, {
					name: '美妆',
				}, {
					name: '潮流',
				}, {
					name: '运动',
				}, {
					name: '服装',
				}],
				menu: [{
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}],
				current: 0,
				lists: [{
					text: '新增商品',
				}, {
					text: '分类设置'
				}, {
					text: '推荐设置'
				}],
				show: false
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			shop(index){
				console.log(index);
				if(index==0){
					uni.navigateTo({
						url:"../addshop/addshop"
					})
				}else if(index==1){
					uni.navigateTo({
						url:"../fen/fen"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.head {
		width: 750rpx;
		height: 80rpx;
		position: relative;

		image {
			position: absolute;
			top: 50rpx;
			right: 65rpx;
			width: 30rpx;
			height: 6rpx;
		}
	}

	.shai_xuan {
		margin: 20rpx 0 20rpx 30rpx;
		width: 690rpx;
		height: 68rpx;
		background: #000;
		border-radius: 34rpx;
		position: relative;
	}

	.text1 {
		margin-left: 53rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;

		color: #FFFFFF;
		line-height: 68rpx;
		position: relative
	}

	.text2 {
		position: absolute;
		left: 224rpx;
		top: -68rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;

		color: #FFFFFF;
		line-height: 68rpx;
		position: relative
	}

	.image_lou {
		position: absolute;
		top: 32rpx;
		left: 70rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.image_xiao {
		position: absolute;
		top: 32rpx;
		left: 62rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.xian {
		position: absolute;
		top: 19rpx;
		left: 184rpx;
		width: 1rpx;
		height: 30rpx;
		background: #FFFFFF;
	}

	.detailback {
		height: 190rpx;
		width: 750rpx;
		position: relative;
	}

	.img_detail {
		margin: 20rpx 0 0 30rpx;
		width: 180rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.title {
		position: absolute;
		top: 17rpx;
		left: 232rpx;
		width: 477rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.have {
		position: absolute;
		left: 232rpx;
		top: 63rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
	}

	.price {
		position: absolute;
		top: 102rpx;
		right: 70rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF4646;

		text {
			font-size: 20rpx;
		}
	}

	.guige {
		position: absolute;
		right: 30rpx;
		top: 107rpx;
		width: 89rpx;
		height: 36rpx;
		background: #F48F5B;
		border-radius: 18rpx;
		text-align: center;
		line-height: 36rpx;

		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.bujin {
		position: absolute;
		left: 600rpx;
		top: 107rpx;
		width: 200rpx;
		height: 36rpx;

	}

	.num {
		position: absolute;
		left: 36rpx;
		top: 0;
		width: 48rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: center;
	}

	.bottom {
		width: 750rpx;
		height: 400rpx;
	}
</style>
